@import '~@delon/theme/styles/antd/themes/default.less';

:host {
    .header-bg {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        //background-image: url("assets/img/1.png");
        //background-image: url('./assets/img/1.png');
        span {
            font-size: large;
            color: #0000cc;
        }
    }
    .header-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .container-count {
        display: flex;
        justify-content: center;
        align-items: center;
        span {
            color: #00b7ee;
            font-size: large;
        }
        button {
            width: 100px;
            background-color: #00b7ee;
            color: #bce8f1;
            font-size: medium;
        }
    }
    .header-img {
        border-radius: 100%;
        width: 120px;
        height: 120px;
    }

    .recom-container {
        display: flex;
        .recom-left {
            width: 65%;
        }
        .recom-left-content {
            display: flex;
            justify-content: space-between;
            button {
                background-color: #dd0000;
                color: white;
            }
        }
        .recom-right {
            width: 30%;
            padding-left: 1%;
        }
        .recom-right-company {
            display: flex;
            flex-wrap: wrap;
        }
        .recom-right-company-img {
            border-radius: 100%;
            width: 60px;
            height: 60px;
        }
    }

    .main-container {
        display: flex;
        justify-content: space-between;
        span {
            font-size: large;
        }
    }
    .area-list {
        display: flex;
        flex-wrap: wrap;
        a {
            margin: 2px;
        }
    }

    .campus-list-all {
        display: flex;
        flex-wrap: wrap;
    }
    .container-list {
        display: flex;
        flex-direction: column;
        width: inherit;
    }
    .container-img-list {
        justify-content: center;
        align-items: center;
        width: inherit;
        display: flex;
    }
    .container-img {
        border-radius: 100%;
        width: 100px;
        height: 100px;
    }
    .container-count {
        display: flex;
        flex-direction: column;
        justify-content: center;
        span {
            color: #222222;
            font-size: medium;
        }
    }
    .container-campus-list {
        display: flex;
        width: inherit;
        flex-wrap: wrap;
        img {
            border-radius: 100%;
            width: 60px;
            height: 60px;
        }
    }

    .perChosen {
        width: 30%;
        margin: 1%;
    }
    //屏幕宽度大于770px立即隐藏
    @media screen and (min-width: 770px) {
        //.phone {
        //    display: none !important;
        //}
        //.pad {
        //    display: none !important;
        //}
        .perChosen {
            width: 30% !important;
            margin: 1%;
        }
    }

    //屏幕宽度大于515px 小于770px立即隐藏
    @media screen and (min-width: 515px) and (max-width: 770px) {
        //.phone {
        //    display: none !important;
        //}
        //.pc {
        //    display: none !important;
        //}
        .perChosen {
            width: 45% !important;
            margin: 1%;
        }
    }

    //屏幕宽度小于515px立即隐藏
    @media screen and (max-width: 515px) {
        //.pad {
        //    display: none !important;
        //}
        //.pc {
        //    display: none !important;
        //}
        .perChosen {
            width: 95% !important;
            margin: 1%;
        }
    }
}
